import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Hello World"
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
        <button id="btn">改变文本2</button>
      </div>
    )
  }

  componentDidMount() {
    document.getElementById("btn").addEventListener("click", (e) => {
      this.setState({
        message: "你好啊,李银河"
      })
      console.log(this.state.message);
    })

    // this.setState({
    //   message: "你好啊,李银河"
    // })
    // console.log(this.state.message);
  }

  changeText() {
    // 情况一: 将setState放入到定时器中
    setTimeout(() => {
      this.setState({
        message: "你好啊,李银河"
      })
      console.log(this.state.message);
    }, 0);
  }
}


// 结论: setState本身是同步函数，但是只要你进入了React的流程中,由于React的性能优化机制体现为异步。如果没有进入就会表现为同步，例如原生DOM,setTimeout等

// 在React的调度流程中,如果setState是同步，Dom也会被同步更新，如果setState被多次调用,Dom节点也会多次更新，造成不必要用性能损耗
// 本质只需要更新最后一次，所以表现为异步